<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>蜻蜓FM</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<style>
			html, body {
				height: 100%;
				background-color: transparent;
			}
			#radio-list {
				-webkit-transition: all .3s;
				transition: all .3s;
				-webkit-transform: translateY(100%);
				height: 100%;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-flex-flow: column;
				flex-flow: column;
			}
			#radio-list.in {
				-webkit-transform: translateY(0%);
			}
			#radio-list h2 {
				color: #272930;
				font-size: 16px;
				padding: 14px;
				background-color: #eaeaea;
			}
			.padding10 {
				padding-left: 10px;
				padding-right: 10px;
			}
		</style>
	</head>
	<body>
		<div id="radio-list">
			<div class="aui-content list " id="list">
				<div class="aui-form" id="userlist">
					<div class="aui-input-row">
						<label class="aui-input-addon">胡华成1</label>
						<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo">
					</div>
				</div>
				<script id="template" type="text/x-dot-template">
					{{for(var i=0;i<it.length;i++){}}
					<div class="aui-input-row padding10">
					<label class="aui-input-addon">{{=it[i]}}</label>
					<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo">
					</div>
					{{}}}
				</script>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/zepto.js"></script>
	<script type="text/javascript" src="../script/dot.min.js"></script>
	-
	<script type="text/javascript">
		function Close() {
			var $list = $('#radio-list');
			$list.removeClass('in');
			setTimeout(function() {
				api.closeFrame({
					name : 'userlist_frm1'
				});
			}, 250);
			setTimeout(function() {
				api.closeFrame({
					name : 'userlist_frm2'
				});
			}, 300);
			setTimeout(function() {
				api.closeFrame({
					name : 'userlist_frm3'
				});
			}, 170);
		}

		var signame = "";
		var userlist = [];
		//["张鹏1", "张鹏2", "张鹏3", "张鹏4", "张鹏5", "张鹏6", "张鹏7", "张鹏8", "张鹏9", "张鹏10", "张鹏11", "张鹏12"];
		function LoadUserList() {
			api.readFile({
				path : 'fs://userlist.json',
			}, function(ret, err) {
				if (ret.status) {
					userlist = JSON.parse(ret.data);
					var template = document.getElementById('template');
					var list_content = document.getElementById('userlist');
					var pagefn = doT.template(template.text);
					list_content.innerHTML = pagefn(userlist);
				}
				//alert(JSON.stringify(ret));
				//alert(JSON.stringify(userlist));
			});
		}

		function SaveUserList() {
			api.writeFile({
				path : 'fs://userlist.json',
				data : JSON.stringify(userlist)
			}, function(ret, err) {
				//alert(JSON.stringify(ret));
				//alert(JSON.stringify(err));
			});
		}

		apiready = function() {
			//SaveUserList();
			LoadUserList();
			var $list = $('#radio-list');
			$list.addClass('in');
			$(document.body).on('touchend', function(evt) {
				if (!$.contains($list[0], evt.target)) {
					$list.removeClass('in');
					Close();
				} else {
					var $select = $('#list');
					if ($.contains($select[0], evt.target)) {
						//暂时使用，不选用循环方式
						setTimeout(function() {
							var el = $('.aui-radio:checked').prev();
							if (el[0]) {
								signame = $api.text(el[0]);
							}
						}, 20);
					}
				}
			});
			api.addEventListener({
				name : 'UserSelect_OK'
			}, function(ret, err) {
				if (signame != "") {
					api.sendEvent({
						name : 'ChangeUser',
						extra : signame
					}, function(ret, err) {
					});
				}
				Close();
			});
		};
	</script>
</html>